<!DOCTYPE html>
<html lang="en">
<head>
  <script src="../../scripts/gentest/test_helper.js"></script>
  <link rel="stylesheet" type="text/css" href="../../scripts/gentest/test_base_style.css">
  <meta name="wpt-test-port" value="css/css-flexbox/multiline-min-max.html" />
  <meta name="wpt-subtest" value=".flexbox 8" />
  <style type="text/css">
    #test-root { background-color: grey; }
    #test-root :nth-child(1) { background-color: blue; }
    #test-root :nth-child(2) { background-color: yellow; }
    #test-root :nth-child(3) { background-color: salmon; }
    #test-root :nth-child(4) { background-color: lime; }
    #test-root :nth-child(5) { background-color: red; }
    #test-root :nth-child(6) { background-color: orange; }
    #test-root :nth-child(7) { background-color: purple; }
  </style>
  <title>
    Test description
  </title>
</head>
<body>

<div id="test-root" style="box-sizing: content-box; display: flex; flex-wrap: wrap; width: 600px; background-color: grey; border: 5px solid black; height: 20px; position: relative;">
  <div style="box-sizing: border-box; height: 10px; max-width: 300px; flex: 1 1 600px; padding-left: 10px;" data-w="300" data-x="0" data-y="0"></div>
  <div style="box-sizing: border-box; height: 10px; width: 100px; flex: 1 1 auto;" data-w="100" data-x="300" data-y="0"></div>
  <div style="box-sizing: border-box; height: 10px; width: 100px; flex: 1 1 auto;" data-w="100" data-x="400" data-y="0"></div>
  <div style="box-sizing: border-box; height: 10px; width: 100px; flex: 1 1 auto;" data-w="100" data-x="500" data-y="0"></div>
</div>

</body>
</html>
